<template>
  <el-form ref="scriptForm" label-width="80px">

    <el-form-item label="电路模板名称" prop="scriptName">
      <el-input v-model="circuitData.name" disabled/>
    </el-form-item>


    <div v-for="(item, index) in attributeList">

      <div :class="{'jsbox':item.state === 'YES', 'jsbox_off': item.state === 'NO'}">

        <el-row class="jsbox_titles">
          <el-col :span="3">
            <el-form-item :label="index+1" :prop="'priority' + index">
              <!--              <el-input v-model="item.priority" type="number" placeholder="请输入内容"/>-->
            </el-form-item>
          </el-col>
<!--          <el-col :span="13">-->
<!--            <el-form-item class="title_form" label="" :prop="'scriptType' + index">-->
<!--              <i-->
<!--                :class="{'el-icon-s-flag myflog1':item.scriptType === 0, 'el-icon-s-flag myflog2': item.scriptType === 1, 'el-icon-s-flag myflog3': item.scriptType === 2, 'el-icon-s-flag myflog4': item.scriptType === 3, 'el-icon-s-flag myflog5': item.scriptType === 4}"></i>-->
<!--              <span class="myname_color">脚本类型：</span>-->
<!--              <el-select v-model="item.operationType" placeholder="请选择类型" size="small">-->
<!--                <el-option v-for="(typeItem, typeIndex) in scriptTypeList" :label="typeItem" :value="typeIndex"/>-->
<!--              </el-select>-->
<!--            </el-form-item>-->

<!--          </el-col>-->
          <el-col :span="8" style="text-align: right;">
            <el-switch
              v-model="item.state"
              active-value="YES"
              inactive-value="NO"
              :inactive-text="item.state === 'YES' ? '已启用' : (item.state === 'NO' ? '未启用' : '')"
            >
            </el-switch>
            <el-button size="mini" @click="deleteAttribute(index)" type="danger"
                       style="margin-bottom: 20px;margin-top: 10px;" icon="el-icon-delete-solid">删除
            </el-button>
          </el-col>
        </el-row>

        <div class="boxborder1">

          <div style="padding:0 15px 15px 15px;">

            <!--属性名-->
            <!--            <el-form-item label="属性名" :prop="'runAttribute' + index">-->
            <!--              <el-input v-model="item.code" :rows="2" type="textarea" placeholder="请输入内容"/>-->
            <!--            </el-form-item>-->

            <el-form-item label="属性名" :prop="'code' + index">
              <el-select style="width:300px" filterable v-model="item.templateId" placeholder="请选择属性">
                <el-option  v-for="(item,index) of attributeTemplateList" :key="item.id" :value="item.id"
                           :label="item.name + ' (' + item.code + ') - ' + GlobalVariable.getOneDataType(item.dataType)">

                  <span style="float: left">{{item.name + ' (' + item.code + ')'}}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ GlobalVariable.getOneDataType(item.dataType) }}</span>
                </el-option>
              </el-select>
            </el-form-item>



            <!--值-->
            <el-form-item label="值" :prop="'value' + index">
              <el-input v-model="item.value" :rows="2" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
          </div>
        </div>


      </div>


      <div style="margin-bottom: 40px"/>

    </div>

    <div style="text-align: right;margin-top: 20px;">
      <el-button type="primary" @click="addAttribute" style="margin-bottom: 20px">添加属性</el-button>
    </div>

    <div>
      <el-button type="primary" @click="saveAttribute">保 存</el-button>
      <el-button @click="close">关 闭</el-button>
    </div>

  </el-form>


</template>

<script>
  import {getCircuit} from "@/api/expert/circuit";
  import {allListTemplate} from "@/api/expert/codeDataTemplate";
  import {allListCodeData, delCodeData, addAllCodeData} from "@/api/expert/codeData";


  export default {
    name: "attributeEdit",
    props: {
      circuitId: {
        type: Number,
        default: undefined
      }
    },
    data() {
      return {
        // 属性列表
        attributeList: [],
        // 属性模板列表
        attributeTemplateList: [],
        // 电路信息
        circuitData: {},
        // 枚举类型
        dataTypeEnum: this.GlobalVariable.dataTypeEnum,
        // 数据类型
        dataType: '',
      }
    },
    mounted() {

      // 获取电路信息
      getCircuit(this.circuitId).then(response => {
        this.circuitData = response.data;

        // 查询属性模板
        let query = {
          circuitTypeId: this.circuitData.circuitTypeId,
          type: "PROP",
          state: "YES",
        }
        // 获取属性模板
        this.getTemplateList(query)
      });

      // 查询属性数据
      this.getCodeDataList({circuitId: this.circuitId})

    },
    methods: {
      /** 查询电路属性参数模板列表 */
      getTemplateList(query) {
        allListTemplate(query).then(response => {
          this.attributeTemplateList = response.data;
        });
      },
      /** 查询电路属性参数列表 */
      getCodeDataList(query) {
        allListCodeData(query).then(response => {
          this.attributeList = response.data;
        });
      },


      /** 删除脚本 */
      deleteAttribute(index) {
        if (this.attributeList[index].id !== null && this.attributeList[index].id !== undefined) {
          delCodeData(this.attributeList[index].id).then(response => {
            if (this.attributeList.length === 1) {
              this.attributeList = []
            } else if (this.attributeList.length > 1) {
              this.attributeList.splice(index, 1)
            }
          });
        } else {
          if (this.attributeList.length === 1) {
            this.attributeList = []
          } else if (this.attributeList.length > 1) {
            this.attributeList.splice(index, 1)
          }
        }
      },

      addAttribute() {
        let script = {
          "circuitId": this.circuitId,
          "templateId": '',
          "state": 'YES',
          "value": ''
        }
        this.attributeList.push(script)
      },

      saveAttribute() {
        addAllCodeData(this.attributeList).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("保存成功");
            this.close()
          }
        })

      },

      close() {
        this.$emit('close');
      },


    }
  }
</script>

